<script setup>
    import { onMounted } from 'vue'
    import { getScreenData } from '@/common/apis'
    import icon1 from '../../assets/images/service/statistics-1.png'
    import icon2 from '../../assets/images/service/statistics-2.png'

    let iconArr = [icon1, icon2]

    let dataLoading = $ref(false)
    let resData = $ref([
        { val3: '48.5%', val1: '驿站', val2: '65772' },
        { val3: '51.5%', val1: '公益岗', val2: '75772' }
    ])
    // onMounted(() => {
    //     getScreenData().then(res => {
    //         dataLoading = false
    //         let { 8: gyg } = res.result
    //         resData = gyg
    //     })
    // })

</script>

<template>
    <div class="card-box dark data-statistics-wrap" v-loading="dataLoading">
        <card-title title="驿站公益点数据统计"></card-title>

        <div class="flex data-wrap">
            <div class="item"
                v-for="(item, index) in resData"
                :key="index"
            >
                <div class="item-top flex-center">
                    <img :src="iconArr[index]">
                    <div class="item-t-r">
                        <div class="ratio"><span>{{ item.val3 }}</span></div>
                        <div class="name">{{ item.val1 }}</div>
                    </div>
                </div>
                <div class="item-bottom">{{ item.val2 }} 个</div>
            </div>
        </div>

    </div>
</template>

<style lang="scss" scoped>
    @import "../../assets/css/common.scss";

    .data-statistics-wrap{
        height: 233px;

        .data-wrap{
            padding: 22px 0;

            .item{
                font-size: 18px;
                color: #fff;
                flex: 1;

                &:first{
                    margin-right: 20px;
                }

                .item-top{
                    margin-bottom: 10px;
                    
                    img{
                        width: 98px;
                        height: 98px;
                        margin-right: 6px;
                    }

                    .item-t-r{
                        .ratio{
                            padding-bottom: 15px;

                            span{
                                font-size: 30px;
                                font-weight: bold;
                            }
                        }
                    }
                                        
                }

                .item-bottom{
                    width: 118px;
                    text-align: center;
                }
            }
        }
    }

</style>